import {
  defineComponent,
  ref,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  createElementVNode,
  unref
} from "vue";
import { b as useProp, _ as _export_sfc } from "./index-CEDaTd93.js";
const _hoisted_1 = { class: "dv-border-box-6" };
const _hoisted_2 = ["width", "height"];
const _hoisted_3 = ["fill", "points"];
const _hoisted_4 = ["fill"];
const _hoisted_5 = ["fill", "cx"];
const _hoisted_6 = ["fill", "cx", "cy"];
const _hoisted_7 = ["fill", "cy"];
const _hoisted_8 = ["stroke", "points"];
const _hoisted_9 = ["stroke", "points"];
const _hoisted_10 = ["stroke", "points"];
const _hoisted_11 = ["stroke", "points"];
const _hoisted_12 = ["stroke"];
const _hoisted_13 = ["stroke"];
const _hoisted_14 = ["stroke", "points"];
const _hoisted_15 = ["stroke", "points"];
const _hoisted_16 = ["stroke", "points"];
const _hoisted_17 = ["stroke", "points"];
const _hoisted_18 = ["stroke", "points"];
const _hoisted_19 = ["stroke", "points"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "BorderBox",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const { propValue } = useProp(props.component);
    const width = ref(150);
    const height = ref(150);
    const resizeHandler = entry => {
      const rect = entry.contentRect;
      width.value = rect.width;
      height.value = rect.height;
    };
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock("div", _hoisted_1, [
          (openBlock(),
          createElementBlock(
            "svg",
            {
              class: "dv-border-svg-container",
              width: width.value,
              height: height.value
            },
            [
              createElementVNode(
                "polygon",
                {
                  fill: unref(propValue).base.backgroundColor,
                  points: `
          9, 7 ${width.value - 9}, 7 ${width.value - 9}, ${
                    height.value - 7
                  } 9, ${height.value - 7}
        `
                },
                null,
                8,
                _hoisted_3
              ),
              createElementVNode(
                "circle",
                {
                  fill: unref(propValue).base.colorRight,
                  cx: "5",
                  cy: "5",
                  r: "2"
                },
                null,
                8,
                _hoisted_4
              ),
              createElementVNode(
                "circle",
                {
                  fill: unref(propValue).base.colorRight,
                  cx: width.value - 5,
                  cy: "5",
                  r: "2"
                },
                null,
                8,
                _hoisted_5
              ),
              createElementVNode(
                "circle",
                {
                  fill: unref(propValue).base.colorRight,
                  cx: width.value - 5,
                  cy: height.value - 5,
                  r: "2"
                },
                null,
                8,
                _hoisted_6
              ),
              createElementVNode(
                "circle",
                {
                  fill: unref(propValue).base.colorRight,
                  cx: "5",
                  cy: height.value - 5,
                  r: "2"
                },
                null,
                8,
                _hoisted_7
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `10, 4 ${width.value - 10}, 4`
                },
                null,
                8,
                _hoisted_8
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `10, ${height.value - 4} ${width.value - 10}, ${
                    height.value - 4
                  }`
                },
                null,
                8,
                _hoisted_9
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `5, 70 5, ${height.value - 70}`
                },
                null,
                8,
                _hoisted_10
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `${width.value - 5}, 70 ${width.value - 5}, ${
                    height.value - 70
                  }`
                },
                null,
                8,
                _hoisted_11
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `3, 10, 3, 50`
                },
                null,
                8,
                _hoisted_12
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `7, 30 7, 80`
                },
                null,
                8,
                _hoisted_13
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `${width.value - 3}, 10 ${width.value - 3}, 50`
                },
                null,
                8,
                _hoisted_14
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `${width.value - 7}, 30 ${width.value - 7}, 80`
                },
                null,
                8,
                _hoisted_15
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `3, ${height.value - 10} 3, ${height.value - 50}`
                },
                null,
                8,
                _hoisted_16
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `7, ${height.value - 30} 7, ${height.value - 80}`
                },
                null,
                8,
                _hoisted_17
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `${width.value - 3}, ${height.value - 10} ${
                    width.value - 3
                  }, ${height.value - 50}`
                },
                null,
                8,
                _hoisted_18
              ),
              createElementVNode(
                "polyline",
                {
                  stroke: unref(propValue).base.colorLeft,
                  points: `${width.value - 7}, ${height.value - 30} ${
                    width.value - 7
                  }, ${height.value - 80}`
                },
                null,
                8,
                _hoisted_19
              )
            ],
            8,
            _hoisted_2
          ))
        ])),
        [[_directive_resize, resizeHandler]]
      );
    };
  }
});
const BorderBox = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ["__scopeId", "data-v-67ce3109"]
]);
export { BorderBox as default };
